<template>
  <div class="banner-content">
    <div class="content"><p>{{ $t('HomeJoinText1') }}</p>
      <p>{{ $t('HomeJoinText2') }}</p>
      <h3>{{ $t('HomeJoinText3') }}</h3>
      <div @click="jumpToPromote">{{ $t('HomeJoinBtn') }}</div>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";
const router = useRouter()
const jumpToPromote = () => {
  //定义一个路径
  const href = router.resolve({
    path: `/promote`
  }).href;
  //打开新的页面 到 href 这个页面
  window.open(href, "_blank");
}
</script>
<style scoped>
.banner-content{
  background-image: url("@/assets/images/home-banner-content.jpg");
}
.banner-content {
  width: 1200px;
  margin: 0 auto;
  height: 352px;
  overflow: hidden;
  background-position: 50% center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  justify-content: flex-end;
}

.banner-content > .content {
  width: 650px;
  height: 352px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.banner-content > .content > p {
  color: rgb(46, 46, 35);
  font-size: 42px;
}

.banner-content > .content > h3 {
  color: rgb(250, 56, 53);
  font-size: 42px;
}

.banner-content > .content > div {
  padding: 0px 40px;
  height: 50px;
  border-radius: 50px;
  line-height: 50px;
  background-color: rgb(46, 46, 46);
  color: rgb(241, 206, 90);
  font-size: 16px;
  margin-top: 20px;
  cursor: pointer;
}

.banner-content > .content > div:hover {
  background-color: rgb(24, 24, 24);
}

</style>